<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/oksub.css">
    <meta charset="utf-8">
    <title></title>
    <style>
        .addtea-con {
            padding: 0 15px 15px 15px;
            margin-bottom: 40px;
        }

        .addtea-con .top-inp {
            margin-left: 20px;
        }

        .addtea-con .from-con {
            margin: auto;
            background-color: #fdfcfc;
            padding: 10px;
            overflow: hidden;
        }

        .addtea-con .from-con .layui-form-item {
            margin: 20px 0;
        }

        .addtea-con .not_border_left {
            border-left: none !important;
        }

        .addtea-con .layui-form-item .layui-input-block .required {
            color: #ffb800;
            font-size: 32px;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
            position: absolute;
            right: -15px;
        }

        .addtea-con .layui-form-select dl dd.layui-this {
            background-color: #1E9FFF !important;
        }

        .addtea-con .layui-btn {
            background-color: #1E9FFF !important;
        }

        .addtea-con .layui-form-select dl {
            max-height: 230px !important;
        }

        .importTeacher {
            padding: 0px 15px 20px 15px;
            margin-bottom: 30px;
        }

        .importTeacher .importTeacher-con {
            height: 60px;
            background-color: #fdfcfc;
        }

        .importTeacher .layui-table-view {
            border: none;
        }

        .importTeacher .importTeacher-con .leftbtn {
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }

        .importTeacher .importTeacher-con .rightbtn {
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }

        .importTeacher .importTeacher-con .savebtn {
            float: left;
            margin: 10px 0px 0px 20px;
        }

        .importTeacher .layui-table-body table tbody .layui-table-hover {
            background: #fffdd3 !important;
        }

        .importTeacher .layui-table-body table tbody .layui-table-click {
            background: #fdef9b !important;
        }

        .importTeacher .model {
            margin-top: 40px;
        }

        .importTeacher .model label {
            font-size: 15px;
        }

        .layui-tab-brief > .layui-tab-title .layui-this:after {
            border-bottom: 1.4px solid #1E9FFF;
            color: #1E9FFF;
        }
    </style>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户管理</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">添加用户</li>
        <li>批量添加用户</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="addtea-con">
                <div class="from-con">
                    <div style="width: 60%;margin: 0 auto;">
                        <form class="layui-form" style="margin-left: -90px" action="" id="formaddtea">
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">用户ID&#12288;</label>
                                        <div class="layui-input-block">
                                            <input id="policeId" name="policeId" type="text"
                                                   style="float: left;position: relative;" lay-verify="required"
                                                   placeholder="请输入账号名" class="layui-input" autocomplete="off">
                                            <i class="required">*</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-left: 15%">
                                        <label class="layui-form-label">用户名&#12288;</label>
                                        <div class="layui-input-block">
                                            <input id="fullName" name="fullName" type="text"
                                                   style="float: left;position: relative;" class="layui-input"
                                                   placeholder="请输入姓名" lay-verify="required" autocomplete="off">
                                            <i class="required">*</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">电&#12288;&#12288;话</label>
                                        <div class="layui-input-block">
                                            <input id="phone" name="phone" type="tel"
                                                   style="float: left;position: relative;" class="layui-input"
                                                   placeholder="请输入电话号码" lay-verify="required|phone" autocomplete="off">
                                            <i class="required">*</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-left: 15%">
                                        <label class="layui-form-label">性&#12288;&#12288;别</label>
                                        <div class="layui-input-block" name="agender" id="agender">
                                            <input type="radio" name="agender" value="true" title="男" checked>
                                            <input type="radio" name="agender" value="false" title="女">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-right: 15%">
                                        <label class="layui-form-label">所属部门</label>
                                        <div class="layui-input-block">
                                            <i class="required">*</i>
                                            <select name="procDepartment" id="procDepartment"
                                                    lay-filter="procDepartment" lay-verify="required">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-form-item" style="margin-left: 15%">
                                        <label class="layui-form-label">所属角色</label>
                                        <div class="layui-input-block">
                                            <i class="required">*</i>
                                            <select name="procRole" id="procRole" lay-filter="procRole"
                                                    lay-verify="required">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item" style="padding-bottom: 90px">
                                <div class="layui-input-block">
                                    <button type="button" id="addParent" lay-submit="" lay-filter="addParent"
                                            class="layui-btn" style="float: right;margin-top: 50px"> 保 存
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="importTeacher">
                <div class="layui-block importTeacher-con">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn leftbtn" id="test4">
                            <i class="layui-icon"></i>选择Excel文件
                        </button>
                        <a href="../../templateDownload/用户信息导入模板.xlsx" type="reset"
                           class="layui-btn layui-btn-primary rightbtn">下载模板</a>
                    </div>
                </div>
                <table class="layui-hide" id="teacher"></table>
                <div class="model">
                    <script type="text/html" id="toolbarDemo">
                        <label>导入失败的数据</label>
                    </script>
                    <table class="layui-hide" id="teacherData"></table>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    layui.use(['form', 'laydate', 'layer'], function () {
        var form = layui.form;
        var layer= layui.layer
        //部门下拉框
        $.ajax({
            url: mainUri + "/dep/select",
            type: 'post',
        }).done(function (datas) {
            var list = datas['data'];
            var option;
            for (var i = 0; i < list.length; i++) {
                option += "<option value='" + list[i]['departmentId'] + "'>" + list[i]['departmentName'] + "</option>";
                $("#procDepartment").html(option);
            }
            form.render('select');
        }).fail(function () {
            layer.msg("服务器错误");
        });
        //角色下拉框
        $.ajax({
            url: mainUri + "/role/select",
            type: 'post',
        }).done(function (datas) {
            var list = datas['data'];
            var option;
            for (var i = 0; i < list.length; i++) {
                option += "<option value='" + list[i]['roleId'] + "'>" + list[i]['roleName'] + "</option>";
                $("#procRole").html(option);
            }
            form.render('select');
        }).fail(function () {
            layer.msg("服务器错误");
        });
        //用户添加
        form.on('submit(addParent)', function (teadata) {
            showloading(true)
            //获取输入的值
            var policeId = $("#policeId").val();
            var fullName = $("#fullName").val();
            var agender = $('input[name="agender"]:checked').val();
            var phone = $("#phone").val();
            var roleId = $("#procRole").val();
            var departmentId = $("#procDepartment").val();
            $.ajax({
                url: mainUri + "/user/insert",
                type: 'get',
                dataType: 'json',
                data: {
                    policeId: policeId,
                    fullName: fullName,
                    agender: agender,
                    phone: phone,
                    roleId: roleId,
                    departmentId: departmentId,
                },//传递到后端的数据
                done: function (msg) {
                    showloading(false)
                    layer.msg("用户已存在！")
                },
                success: function (data) {
                    showloading(false)
                    if (data.code == 0) {
                        layer.alert('用户信息添加成功了！', {icon: 6});
                        $("input").val('');
                        return false;
                    } else if (data.code == '-9999') {
                        layer.alert('用户名已经存在了！', {icon: 2});
                        $("input").val('');
                        return false;
                    } else {
                        layer.alert('用户信息添加失败了！', {icon: 2});
                        $("input").val('');
                        return false;
                    }
                },
                error:function(){
                    showloading(false)
                }
            });

        });
    });
</script>

<script>
    //用户信息导入
    layui.use(['element', 'okLayer'], function () {
        var $ = layui.jquery;
        var okLayer = layui.okLayer;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        $("#test4").on('click', excelImport);

        function excelImport() {
            okLayer.open("用户信息导入", "userImport.html", "90%", "90%", null, function () {

            });
        }

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });

</script>
</html>
